﻿<html>
<head>
    <title>大屏展示</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../js/component.min.css">
    <style>

        body{background:none;}
        input,button,select,textarea{outline:none;}
        ul,li,dl,ol{list-style:none;}
        a{color:aqua;text-decoration:none;}
        .quality{height: 80px;font-size: 10px; }
        .quality li{padding: 3px;}
        .quality li p{height:14px;line-height:10px;display: flex;color:#fff}
        .quality li p>span:nth-of-type(2),.list_lh_header p>span:nth-of-type(2){flex:2;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
        .quality li p>span:nth-of-type(1),.list_lh_header p>span:nth-of-type(1){flex:2;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
        .quality li p>span:nth-of-type(3),.list_lh_header p>span:nth-of-type(3){width: 100px;}
        .quality li p span{float:right;color:#2f92f7}
        .quality *{margin: 0;padding: 0}
        .quality li p em{width:80px;font:normal 12px/24px Arial;color:#FF3300;float:right;display:inline-block;}
        .list_lh{height:100%;overflow:hidden;}
        .list_lh *{margin: 0;padding: 0}
        .list_lh li,.list_lh_header p{padding:5px;}
        .list_lh li p,.list_lh_header p{height:24px;line-height:24px;display: flex;color:#fff}
        .list_lh li p>span:nth-of-type(2),.list_lh_header p>span:nth-of-type(2){flex:2;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
        .list_lh li p>span:nth-of-type(1),.list_lh_header p>span:nth-of-type(1){flex:2;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
        .list_lh li p>span:nth-of-type(3),.list_lh_header p>span:nth-of-type(3){width: 100px;}
        .list_lh li p em{width:80px;font:normal 12px/24px Arial;color:#FF3300;float:right;display:inline-block;}
        .list_lh li p span{float:right;color:#2f92f7}
        .list_lh_header p span{
            text-align: left;
        }
        .list_lh li p a.btn_lh{background:#28BD19;height:17px;line-height:17px;color:#fff;padding:0 5px;margin-top:4px;display:inline-block;float:right;}
        /*地图标题*/

        /*.BMap_pop div:nth-child(1) div {*/
            /*border-radius: 8px 0 0 0;*/
        /*}*/

        /*.BMap_pop div:nth-child(3) {*/
            /*border-radius: 0 9px 0 0;*/
            /*border-top: 1px solid #ababab;*/
            /*border-right: 1px solid #ababab;*/
            /*border-left: 1px solid white;*/
            /*width: 23px !important;*/
            /*height: 24px !important;*/
            /*background-color: white;*/
        /*}*/

            /*.BMap_pop div:nth-child(3) div {*/
                /*display: none;*/
            /*}*/

        /*.BMap_pop div:nth-child(5) div {*/
            /*border-radius: 0 0 0 8px;*/
        /*}*/

        /*.BMap_pop div:nth-child(7) {*/
            /*border-radius: 0 0 9px 0;*/
            /*border-right: 1px solid #ababab;*/
            /*border-bottom: 1px solid #ababab;*/
            /*border-left: 1px solid white;*/
            /*width: 23px !important;*/
            /*height: 24px !important;*/
            /*background-color: white;*/
        /*}*/

            /*.BMap_pop div:nth-child(7) div {*/
                /*display: none;*/
            /*}*/
        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 180px;
            padding-top: 5px;
            text-align: left;
        }

        .panel {
            padding: 10px;
            color: #fff;
            background: #123272;
            margin-bottom: 20px;
        }

        .panel-f p {
            margin-bottom: 0px !important;
            margin-left: 10px !important;
            line-height: 10px !important;
            white-space: nowrap;
            font-size: 1rem !important;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }

        a:visited {
        }

        /* 已访问的链接 */

        a:hover {
            text-decoration: underline;
            color: red
        }

        /* 当有鼠标悬停在链接上 */

        a:active {
        }

        .el-dialog {
            background: #01253f;
            box-shadow: #0D5887 0px 0px 10px 5px;
        }

        .el-dialog__title {
            color: #FFC526;
        }

        .el-dialog__body {
            padding-top: 0px;
            color: #fff;
        }
        .el-progress-circle{
            width:95px !important;
            height: 95px !important;
        }
        .titleSpan{
            position: absolute;
            top: 230px;
            left: 20px;
        }
        .chart-outer{
            background: transparent;
        }
        img{
            width:42px;
            height: 42px;
        }
    </style>
</head>
<body>
    <div class="page visual" id="page-vue" v-cloak>
        <div class="inner-title">
            <div class="title">
                <div class="subtitle">
                    {{company}}
                    <div class="lline"></div>
                    <div class="rline"></div>
                    <div class="point point-lt"></div>
                    <div class="point point-rt"></div>
                </div>
            </div>
        </div>
        <div class="inner-wrap">
            <div class="row-1">
                <div class="col-1">
                    <div class="top10">
                        <span class="number">
                             {{date[0]}}
                            <sup class="sup"><i class="el-icon-warning"></i> 本月总告警数</sup>
                        </span>
                        <span class="time">{{date[0]}}/{{date[1]}}/{{date[2]}}</span>
                    </div>

                    <!--左边第1个饼图-->
                    <div class="box row1-left1">
                        <span class="box-tit">告警分类</span>
                        <div class="box-inner">
                            <chart-elex :option="chartOptionRow1Left1"></chart-elex>
                        </div>
                    </div>

                    <!--左边第2个饼图-->
                    <div class="box row1-left2">
                        <span class="box-tit">实时告警</span>
                        <div class="box-inner" style="height:80%">
                            <!--<chart-elex :option="chartOptionRow1Left2"></chart-elex>-->
                            <div class="list_lh_header"><p style="border-bottom:2px solid rgba(23,40,90,0.8)"><span>设备名称</span><span>告警时间</span><span>告警状态</span></p></div>
                            <div class="list_lh notice" style="height: 80%">
                                <ul id="notice">
                                    <li>
                                        <p><span>金泰大厦2208</span><span>灯不亮</span><span>未开始</span></p>
                                    </li>
                                    <li>
                                        <p><span>富地大厦909</span><span> 门关不严</span><span>进行中</span></p>
                                    </li>
                                    <li>
                                        <p><span>金泰先锋小区3号楼2单元</span><span>门禁打不开</span><span>进行中</span></p>
                                    </li>
                                    <li>
                                        <p><span>丽湾小区2号楼1单元1803</span><span>窗户坏了</span><span>未开始</span></p>
                                    </li>
                                    <li>
                                        <p><span>天津丽湾小区1期2号楼1单元</span><span>可视对讲没显示</span><span>已完成</span></p>
                                    </li>
                                    <li>
                                        <p><span>中国移动北京基地</span><span>停车场道闸轮子坏了</span><span>已完成</span></p>
                                    </li>
                                    <li>
                                        <p><span>CBD国际大厦  203</span><span>停车场道闸不落杆</span><span>未开始</span></p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="col-2">
                    <!--中间地图-->
                    <div class="box row1-center">
                        <div class="map">
                            <chart-map ref="chartMap"
                                       :mapstyle="SiteConfig.mapStyle"
                                       :markers="map.markers"
                                       :center="map.center"
                                       :zoom="map.zoom"
                                       v-on:click-marker="onMarker"
                                       v-on:on-zoom="onZoom">
                                <info-win :title="map.winTitle" :point="map.winPoint">
                                    <!--'设备总数：' + mdata.devCount +-->
                                    <!--'<br>在线设备：' + mdata.onlineCount +-->
                                    <!--'&nbsp;&nbsp;故障设备：' + (parseInt(mdata.devCount) - parseInt(mdata.onlineCount)) +-->
                                    <!--'<br>联系人员：' + mdata.manager +-->
                                    <!--'<br>联系电话：' + mdata.phone,-->
                                    <div style="font-size: 16px">
                                    <el-col :span="12">
                                        <spn>设备总数：{{mdata.devCount}}</spn><br>
                                        <spn>在线设备：{{mdata.onlineCount}}</spn><br>
                                        <spn>故障设备：{{parseInt(mdata.devCount) - parseInt(mdata.onlineCount)}}</spn><br>
                                        <spn>联系人员：{{mdata.manager}}</spn><br>
                                        <spn>联系电话：{{mdata.phone}}</spn>
                                    </el-col>
                                      <el-col :span="12" >
                                          本年能耗 {{mdata.energyYear}} <el-progress :percentage="mdata.yearPercent" :color="defaultColors"></el-progress>
                                          本月能耗 {{mdata.energyMonth}}  <el-progress :percentage="mdata.monthPercent" :color="defaultColors" ></el-progress>
                                          本日能耗 {{mdata.energyDay}}<el-progress :percentage="mdata.dayPercent" :color="defaultColors"></el-progress>
                                          <!--电压合格率 <el-progress :percentage="mdata.voltageRate*100"></el-progress>-->
                                      </el-col>
                                      <el-col :span="24" style="margin-top: 10px;display: flex" >
                                          <div style="display: flex; flex-direction: column ;text-align: center">
                                          <p>功率因数</p>
                                          <el-progress type="circle" :percentage="mdata.powerFactor*100"  :color="defaultColors" ></el-progress>
                                          </div>
                                          <div style="display: flex; flex-direction: column;text-align: center " >
                                              <p >谐波占有率</p>
                                              <el-progress type="circle" :percentage="mdata.harmonic*100" :color="customColors" ></el-progress>
                                          </div>
                                          <div style="display: flex; flex-direction: column;text-align: center ">
                                              <p >三相不平衡度</p>
                                              <el-progress type="circle" :percentage="mdata.threePhase*100"  :color="customColors"></el-progress>
                                          </div>
                                          <div style="display: flex; flex-direction: column ;text-align: center">
                                              <p >电压合格率</p>
                                              <el-progress type="circle" :percentage="mdata.voltageRate*100" :color="defaultColors"></el-progress>
                                          </div>
                                      </el-col>
                                    </div>


                                    <!--
                                    <p>{{map.winText}}</p>
                                    <el-button size="mini" @click="goDetail">进入</el-button>
                                    -->
                                </info-win>
                            </chart-map>
                        </div>
                    </div>
                </div>
                <div class="col-3">

                    <div class="box row1-right1">
                        <span class="box-tit">工单类型统计</span>
                        <div class="box-inner">
                            <!--&lt;!&ndash;右边第1个饼图&ndash;&gt;-->
                            <!--<div class="col">-->
                                <!--<div class="tit">报警</div>-->
                                <!--<chart-elex :option="chartOptionRow1Right1"></chart-elex>-->
                            <!--</div>-->

                            <!--&lt;!&ndash;右边第2个饼图&ndash;&gt;-->
                            <!--<div class="col">-->
                                <!--<div class="tit">巡检</div>-->
                                <!--<chart-elex :option="chartOptionRow1Right2"></chart-elex>-->
                            <!--</div>-->

                            <!--&lt;!&ndash;右边第3个饼图&ndash;&gt;-->
                            <!--<div class="col">-->
                                <!--<div class="tit">维修</div>-->
                                <!--<chart-elex :option="chartOptionRow1Right3"></chart-elex>-->
                            <!--</div>-->
                            <chart-elex :option="chartOptionRow1Right1"></chart-elex>
                        </div>
                    </div>

                    <div class="box row1-right2">
                        <span class="box-tit">设备总数据</span>
                        <div class="box-inner">
                            <div class="col" @click="showPro()">
                                <i class="el-icon-star-off i1"></i>
                                <span class="number">{{joinTotal.totalProjects}}</span>
                                <span class="tit">接入厂家</span>
                            </div>
                            <div class="col" style="margin-left:10px;  width: 47%;">
                                <i class="el-icon-tickets i2"></i>
                                <span class="number">{{joinTotal.totalDevices}}</span>
                                <span class="tit">接入设备</span>
                            </div>
                            <div class="col">
                                <i class="el-icon-share i3"></i>
                                <span class="number">{{joinTotal.totalOnlineDevices}}</span>
                                <span class="tit">在线设备</span>
                            </div>
                            <div class="col" style="margin-left:10px;width: 47%;">
                                <i class="el-icon-bell i4"></i>
                                <span class="number">{{joinTotal.totalErrorDevices}}</span>
                                <span class="tit">报警设备</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row-2">
                <div class="box row2-1">
                    <span class="box-tit">本月告警企业排行 TOP5</span>
                    <table class="table">
                        <tr v-for="(item,index) in tableAlarm" @click="alarmDetail(index)" :title="item.projectName" style="cursor:pointer ">
                            <td><i>{{index+1}}</i></td>
                            <td style="color: #2f92f7">{{item.projectName}}</td>
                            <td style="text-align: right ;"><i class="number" style="width: 50px;">lv1　{{item.errordata0}}</i></td>
                            <td style="text-align: right;"><i class="number" style="width: 50px;">lv2　{{item.errordata1}}</i></td>
                            <td style="text-align: right;"><i class="number" style="width: 50px;">lv3　{{item.errordata2}}</i></td>
                        </tr>
                    </table>
                </div>

                <div class="box row2-2">
                    <span class="box-tit">本月企业节能指标</span>
                    <div class="box-inner">
                        <chart-elex :option="chartOptionRow22"></chart-elex>
                        <!--下边第1个饼图-->
                        <!--<div class="col">
                            <div class="tit tit1">今天</div>
                            <chart-elex :option="chartOptionRow22"></chart-elex>
                        </div>-->
                        <!--下边第2个饼图-->
                        <!--<div class="col">
                            <div class="tit tit2">本月</div>
                            <chart-elex :option="chartOptionRow23"></chart-elex>
                        </div>-->
                        <!--下边第3个饼图-->
                        <!--<div class="col">
                            <div class="tit tit3">本年度</div>
                            <chart-elex :option="chartOptionRow24"></chart-elex>
                        </div>-->
                    </div>
                </div>

                <!--下边第4个柱状图-->
                <div class="box row2-3">
                    <span class="box-tit">本月企业品质分数排行</span>
                    <div class="box-inner">
                        <chart-elex :option="chartOptionRow25"></chart-elex>
                    </div>
                </div>

                <!--下边第5个折线面积图-->
                <div class="box row2-4">
                    <span class="box-tit">年度运维分布</span>
                    <div class="box-inner">
                        <chart-elex :option="chartOptionRow26"></chart-elex>
                    </div>
                </div>


            </div>
        </div>

        <div id="audioDiv" style="height:30px;width:30px;display: none"></div>

        <el-dialog title="项目列表" :visible.sync="proVisible" width="90%" style="margin-top:10px;height: 80%">
            <div style="margin-top: 10px;">
                <el-row style="flex-wrap: nowrap">
                    <el-col :span="8" v-for="(item,index) in  map.markers">
                        <a @click="goScene(item.proNo)" style="font-size:large">{{item.name}}</a>
                        <div class="panel panel-f">
                            <el-row type="flex">
                                <image src="../../../imgs/project.png" style="width: 50%; height: 60px;"></image>
                                <div>
                                    <p>设备总数:　{{item.devCount}}</p>
                                    <p>在线设备:　{{item.onlineCount}}</p>
                                </div>
                            </el-row>

                            <p>故障设备:　{{item.errorCount}}</p>
                            <p>本日能耗:　{{item.energyDay==null?'':item.energyDay+'　tce'}}</p>
                            <p>本月能耗:　{{item.energyMonth==null?'':item.energyMonth+'　tce'}}</p>
                            <p>本年能耗:　{{item.energyYear==null?'':item.energyYear+'　tce'}}</p>
                            <p>本月电耗:　{{item.eleMonth==null?'':item.eleMonth+'　KWH'}}</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>

        <el-dialog title="告警明细" :visible.sync="alarmVisible" width="60%" style="margin-top:10px;height: 80%">
            <div style="height: 90%;width: 100%" >
              <el-row>
                  <el-col :span="24">
                      <div class="tit tit3" style="text-align: center">告警分组</div>
                      <div class="chart-outer" id="alarmChart2"></div>
                  </el-col>
              </el-row>
            </div>
        </el-dialog>
    </div>


    <!-- import Vue before Element -->
    <script src="../../../assets/bundle.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../user-visual/js/scroll.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
    <script type='text/javascript' src='./default-chart.js?v=1.1' charset='utf-8'></script>

    <script>
        SiteConfig.chartColors = ['#00F6FF', '#0E8BFF', '#5CFB3F', '#FCFF4D', '#E60800'];

        let vuePage = new Vue({
            el: '#page-vue',
            data: {
                tableAlarm: [],
                chartOptionRow1Left1: {},
                chartOptionRow1Left2: {},
                chartOptionRow1Right1: {},
                chartOptionRow1Right2: {},
                chartOptionRow1Right3: {},
                chartOptionRow22: {},
                chartOptionRow23: {},
                chartOptionRow24: {},
                chartOptionRow25: {},
                chartOptionRow26: {},
                map: {
                    markers: [],
                    winTitle: '化工总厂',
                    winText: '',
                    winPoint: {},
                    center: { lng: 0, lat: 0 },
                    zoom: 5
                },
                joinTotal: {
                    totalProjects: 0,
                    totalDevices: 0,
                    totalOnlineDevices: 0,
                    totalErrorDevices: 0
                }, //接入统计
                proVisible: false,
                alarmVisible: false,
                errorList:'',
                mdata:'',
                date:'',
                defaultColors: [
                    {color: '#f56c6c', percentage: 60},
                    {color: '#e6a23c', percentage: 90},
                    {color: '#24b800', percentage: 100},
                ],
                customColors: [
                    {color: '#24b800', percentage: 30},
                    {color: '#e6a23c', percentage: 60},
                    {color: '#f56c6c', percentage: 100},


                ],
                company:'',
            },
            methods: {

                goScene(proNo) {
                    window.open("../device/scene-map.html?proNo=" + proNo, '_blank')
                },
                onMarker(mdata) {
                    //alert(JSON.stringify(mdata));
                        this.map.winTitle = mdata.name;
                        this.mdata = mdata;
                        this.map.winText = '设备总数：' + mdata.devCount +
                            '<br>在线设备：' + mdata.onlineCount +
                            '&nbsp;&nbsp;故障设备：' + (parseInt(mdata.devCount) - parseInt(mdata.onlineCount)) +
                            '<br>联系人员：' + mdata.manager +
                            '<br>联系电话：' + mdata.phone,
                            this.map.winPoint = {
                                lat: mdata.lat,
                                lng: mdata.lng
                            };
                        this.mdata.dayPercent = mdata.energyYear?parseFloat(mdata.energyDay*100/mdata.energyYear).toFixed(2):0;
                        this.mdata.monthPercent =mdata.energyYear?parseFloat(mdata.energyMonth*100/mdata.energyYear).toFixed(2):0;
                        this.mdata.yearPercent =mdata.energyYear?100:0;

                },
                onZoom(zoom) {

                },
                alarmDetail(index){
                    this.alarmVisible = true;
                    setTimeout(()=>{
                            //告警分布
                            HttpUtil.get('Analysis/getUserErrorGroupSummary',{UserId: this.tableAlarm[index].projectOwner,year:0,month: 0}).success((res)=>{
                                let data = {
                                    xdata: [],
                                    ydata: [],
                                    count:0,
                                }
                                if (res.data.length!=0)
                                    for (let item of res.data) {
                                        data.xdata.push(item.groupName);
                                        data.ydata.push({
                                            value: item.errorCount,
                                            name: item.groupName,
                                            Id:item.Id
                                        })
                                        data.count += item.errorCount;
                                    }
                                let alarmChart2  = echarts.init(document.getElementById('alarmChart2'));
                                alarmChart2.setOption(retRow24Option(data));
                            })


                    },0)
                },

                //循环播放tts
                audioPlay (i) {
                    $('#audioDiv').empty();
                    let url = 'http://tts.baidu.com/text2audio/text2audio?lan=zh&amp;ie=UTF-8&amp;per=3&amp;spd=5&amp;text=';
                    url +='项目'+this.errorList[i].ProjectName +',设备'+this.errorList[i].DevName.replace('#','井') + ',发生'+this.errorList[i].ErrorName;
                    let borswer = window.navigator.userAgent.toLowerCase();
                    if (borswer.indexOf("ie") >= 0) {
                        //IE内核浏览器
                        let strEmbed = '<embed name="embedPlay"  src="'+ url +'"  hidden="true"></embed>';
                        if ($("#audioDiv").find("embed").length <= 0)
                            $("#audioDiv").append(strEmbed);
                        let embed = document.embedPlay;
                        //浏览器不支持 audion，则使用 embed 播放
                        embed.volume = 100;
                        //embed.play();
                    } else {
                        //非IE内核浏览器
                        let strAudio = "<audio id='audioPlay'   src='"+ url +"' hidden='true'>";
                        if ($("#audioDiv").find("audio").length <= 0)
                            $("#audioDiv").append(strAudio);
                        let audio = document.getElementById("audioPlay");
                        //浏览器支持 audion
                        audio.play();
                        audio.addEventListener('ended', ()=>{
                            if (i+1>=this.errorList.length) {
                                this.getError();
                            }else {
                                this.audioPlay(i+1);
                            }
                        }, false);
                    }
                },
                getError(){
                    HttpUtil.get('Error/List',{ProcessFlag:-1,LogType:-1,UserId:SiteConfig.account.id}).success((res)=>{
                        $('#notice').empty();
                        for (let item of res.data){
                            item.LogDate = item.LogDate?item.LogDate.replace('T',' '):'';
                            $('#notice').append('<li><p><span>'+item.DevName+'</span><span>'+item.LogDate+'</span><span>'+item.ErrorName+'</span></p></li>')
                        }

                        this.errorList = res.data;
                        if (res.data.length!=0)
                            this.audioPlay(0);
                    });
                }
            },
            created: function () {
                let param = {
                    UserId: 0, //0表示当前用户
                    year: 0,//0表示当前年
                    month: 0 //0表示当前月
                };
                HttpUtil.get('Analysis/getUserSummary', param).success((data) => {

                    this.joinTotal = data.data;
                });
                //告警排名


            },
            mounted: function () {
                $('.notice li:even').addClass('lieven');
                $("div .notice").myScroll({
                    speed:60, //数值越大，速度越慢
                    rowHeight:60 //li的高度
                });
                let day = TimeUtil.convertToString(new Date()).substr(0, 10);
                let dArr = day.split('-');
                this.date = dArr;
                let param = {
                    zoneType: -1,
                    year: dArr[0],
                    energyType: 'Electric',
                    sumType: 0
                }
                //告警列表
                this.getError();
                //品质打分
                HttpUtil.get('Statistics/QualityAndEfficientScoring',{UserId:SiteConfig.account.id,year:dArr[0],month:dArr[1]}).success((res)=>{
                    let chartData = {
                        ydata:[],
                        xdata:[]
                    };
                    for (let i in res.data){
                        chartData.xdata.push(res.data[i].projectName);
                        chartData.ydata.push(res.data[i].Scoring);
                    }
                    chartData.xdata.reverse();
                    chartData.ydata.reverse();
                    this.chartOptionRow25 = retRow25Option(chartData);
                })
                //节能潜质
                HttpUtil.get('Statistics/QualityAndEfficientScoring',{UserId:SiteConfig.account.id,type:1,year:dArr[0],month:dArr[1]}).success((res)=>{
                    let chartData = {
                        ydata:[],
                        xdata:[]
                    };
                    for (let i in res.data){
                        chartData.xdata.push(res.data[i].projectName);
                        chartData.ydata.push(res.data[i].Scoring);
                    }
                    chartData.xdata.reverse();
                    chartData.ydata.reverse();
                    this.chartOptionRow22 = retRow22Option(chartData);
                })
                //工单类型统计
                HttpUtil.get('Screen/workflowTypeList',{UserId:SiteConfig.account.id}).success((res)=>{
                    let chartData={
                        finish:[],
                        undo:[],
                    }
                    for (let item of res.data){
                        chartData.finish.push(item.finish);
                        chartData.undo.push(item.totalCounts - item.finish);
                    }
                    this.chartOptionRow1Right1 = retRow1Right1Option(chartData);
                })
                //报警打分排名
                HttpUtil.get('Analysis/getUserProjectErrorGroupSummary',{UserId:SiteConfig.account.id,}).success((res)=>{
                    //倒序
                    res.data.sort(keysrt('Scoring',true,parseInt));
                    this.tableAlarm = res.data;

                })
                //12个月的运维统计
                HttpUtil.get('Screen/maintenanceCount',{UserId:SiteConfig.account.id}).success((res)=>{
                        let data = [];
                        for (let key in res.data[0]){
                            data.push(res.data[0][key]);
                        }
                    this.chartOptionRow26 = retRow26Option(data);
                })
                //告警分布
                HttpUtil.get('Analysis/getUserErrorGroupSummary', {
                    UserId: SiteConfig.account.id,
                    year: dArr[0],
                    month: dArr[1],
                }).success((res) => {
                    let data = {
                        xdata: [],
                        ydata: [],
                        count: 0,
                    }
                    for (let item of res.data) {
                        data.xdata.push(item.groupName);
                        data.ydata.push({
                            value: item.errorCount,
                            name: item.groupName
                        })
                        data.count += item.errorCount;
                    }
                    this.chartOptionRow1Left1 = retRow1Left1Option(data);
                })

                this.company = SiteConfig.account.companyName



                HttpUtil.get('Project/List', { pagesize: 200 }).success((data) => {
                    //console.log('getList',data);
                    let datas = data.data;
                    for (let i = 0; i < datas.length; i++) {
                        let img = '../../../imgs/proMarker.png';
                         if(datas[i].powerFactor >0.9){
                             if (datas[i].devicecount==datas[i].onlinecount){
                                 if (datas[i].errorcount>0){
                                     img = '../../../imgs/proMarker000.png'
                                 } else {
                                     img = '../../../imgs/proMarker001.png'
                                 }
                             } else {
                                 if (datas[i].errorcount>0){
                                     img = '../../../imgs/proMarker010.png'
                                 } else {
                                     img = '../../../imgs/proMarker011.png'
                                 }
                             }
                         }else {
                             if (datas[i].devicecount==datas[i].onlinecount){
                                 if (datas[i].errorcount>0){
                                     img = '../../../imgs/proMarker100.png'
                                 } else {
                                     img = '../../../imgs/proMarker101.png'
                                 }
                             } else {
                                 if (datas[i].errorcount>0){
                                     img = '../../../imgs/proMarker110.png'
                                 } else {
                                     img = '../../../imgs/proMarker111.png'
                                 }
                             }
                         }
                        this.map.markers.push({
                            lat: datas[i].lat,
                            lng: datas[i].lng,
                            text: datas[i].onlinecount,
                            name: datas[i].projectName,
                            devCount: datas[i].devicecount,
                            onlineCount: datas[i].onlinecount,
                            errorCount: datas[i].errorcount,
                            proNo: datas[i].projectNo,
                            eleMonth: datas[i].EletricMonth,
                            energyMonth: datas[i].energyMonth?datas[i].energyMonth:0,
                            energyDay: datas[i].energyDay?datas[i].energyDay:0,
                            energyYear: datas[i].energyYear?datas[i].energyYear:0,
                            img: datas[i].img,
                            powerFactor:parseFloat(datas[i].powerFactor).toFixed(2),
                            harmonic:parseFloat(datas[i].harmonic).toFixed(2),
                            voltageRate:parseFloat(datas[i].voltageRate).toFixed(2),
                            threePhase:parseFloat(datas[i].threePhase).toFixed(2),
                            projectOwner:datas[i].projectOwner,
                            manager: datas[i].manager == null ? '' : datas[i].manager,
                            phone: datas[i].phone == null ? '' : datas[i].phone,
                            // icon: datas[i].errorcount >0?'../../../imgs/marker-alarm2.png': (parseInt(datas[i].onlinecount) > 0 ? '../../../imgs/marker-alarm.png' : '../../../imgs/marker-alarm3.png')
                            icon:img,
                        });

                    }
                });
            }
        });
        function showPro() {
            vuePage.proVisible = true;
        }
        // 排序方法
        function keysrt (filed,rev,primer){
            rev = (rev) ? -1 : 1;
            return function (a, b) {
                a = a[filed];
                b = b[filed];
                if (typeof (primer) != 'undefined') {
                    a = primer(a);
                    b = primer(b);
                }
                if (a < b) { return rev * -1; }
                if (a > b) { return rev * 1; }
                return 1;
            }
        };
    </script>
</body>
</html>
